<!--首页-->
<template>
  <el-container>
    <el-header>

      <el-menu
         :default-active="activeIndex"
         class="el-menu-demo"
         mode="horizontal"
         @select="handleSelect">
        <el-menu-item index="1"><router-link to="/page1">JAVA</router-link></el-menu-item>
        <el-menu-item index="2">MYSQL</el-menu-item>
        <el-menu-item index="3">VUE</el-menu-item>
        <el-menu-item index="4">HTML</el-menu-item>
      </el-menu>
    </el-header>
    <!--正文内容-->
    <el-main>
      <el-row>
       <el-col :span="18" style="background-color: red;height: 100%">
         <el-card>
         </el-card>
       </el-col>
       <el-col :span="6" style="background-color: floralwhite">10</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
export default{
  data(){
    return{
      activeIndex: '1',
    }
  }
}
</script>
<style scoped>
  .el-main{
    background-color: firebrick;
    margin: 0 auto;
    width: 80%;
    padding-bottom: 0;
  }
  .el-container{
    background-color: salmon;
  }
  .el-header{
    display: flex;
    justify-content: center;
    background-color: gold;
  }
  .el-menu{
    padding-left: 20%;
    width: 80%;
  }
  .el-aside {
    background-color: navajowhite;
  }
  .el-row,.el-col,.el-card{
    height: 100%;
  }
</style>
